<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3562123" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">手术查询</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">搜索床位</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">会诊单查询</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">切换用户</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">母乳喂养</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">手环绑定</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">仪器绑定</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">icon-返回主菜单</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">icon-返回主列表</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">下拉箭头</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">二级护理-女</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">一级护理-儿童</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">一级护理-男</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">一级护理-女</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">三级护理-女</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">特级护理-男</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">三级护理-男</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">二级护理-儿童</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">三级护理-儿童-男</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">二级护理-男</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">特级护理-女</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">特级护理-儿童</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">三级护理-儿童-女</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">icon-新生儿</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">icon-男</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">icon-女</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">icon-我的</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">icon-查询</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1660960415865'); /* IE9 */
  src: url('iconfont.eot?t=1660960415865#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1660960415865') format('woff'),
       url('iconfont.ttf?t=1660960415865') format('truetype'),
       url('iconfont.svg?t=1660960415865#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-shoushuchaxun"></span>
            <div class="name">
              手术查询
            </div>
            <div class="code-name">.icon-shoushuchaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuochuangwei"></span>
            <div class="name">
              搜索床位
            </div>
            <div class="code-name">.icon-sousuochuangwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huizhendanchaxun"></span>
            <div class="name">
              会诊单查询
            </div>
            <div class="code-name">.icon-huizhendanchaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiehuanyonghu"></span>
            <div class="name">
              切换用户
            </div>
            <div class="code-name">.icon-qiehuanyonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-muruweiyang"></span>
            <div class="name">
              母乳喂养
            </div>
            <div class="code-name">.icon-muruweiyang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouhuanbangding"></span>
            <div class="name">
              手环绑定
            </div>
            <div class="code-name">.icon-shouhuanbangding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yiqibangding"></span>
            <div class="name">
              仪器绑定
            </div>
            <div class="code-name">.icon-yiqibangding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-fanhuizhucaidan"></span>
            <div class="name">
              icon-返回主菜单
            </div>
            <div class="code-name">.icon-icon-fanhuizhucaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-fanhuizhuliebiao"></span>
            <div class="name">
              icon-返回主列表
            </div>
            <div class="code-name">.icon-icon-fanhuizhuliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuojiantou2"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.icon-zuojiantou2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjiantou"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-youjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xialajiantou"></span>
            <div class="name">
              下拉箭头
            </div>
            <div class="code-name">.icon-xialajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuojiantou"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.icon-zuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erjihuli-nv"></span>
            <div class="name">
              二级护理-女
            </div>
            <div class="code-name">.icon-erjihuli-nv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yijihuli-ertong"></span>
            <div class="name">
              一级护理-儿童
            </div>
            <div class="code-name">.icon-yijihuli-ertong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yijihuli-nan"></span>
            <div class="name">
              一级护理-男
            </div>
            <div class="code-name">.icon-yijihuli-nan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yijihuli-nv"></span>
            <div class="name">
              一级护理-女
            </div>
            <div class="code-name">.icon-yijihuli-nv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sanjihuli-nv"></span>
            <div class="name">
              三级护理-女
            </div>
            <div class="code-name">.icon-sanjihuli-nv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tejihuli-nan"></span>
            <div class="name">
              特级护理-男
            </div>
            <div class="code-name">.icon-tejihuli-nan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sanjihuli-nan"></span>
            <div class="name">
              三级护理-男
            </div>
            <div class="code-name">.icon-sanjihuli-nan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erjihuli-ertong"></span>
            <div class="name">
              二级护理-儿童
            </div>
            <div class="code-name">.icon-erjihuli-ertong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sanjihuli-ertong-nan"></span>
            <div class="name">
              三级护理-儿童-男
            </div>
            <div class="code-name">.icon-sanjihuli-ertong-nan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erjihuli-nan"></span>
            <div class="name">
              二级护理-男
            </div>
            <div class="code-name">.icon-erjihuli-nan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tejihuli-nv"></span>
            <div class="name">
              特级护理-女
            </div>
            <div class="code-name">.icon-tejihuli-nv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tejihuli-ertong"></span>
            <div class="name">
              特级护理-儿童
            </div>
            <div class="code-name">.icon-tejihuli-ertong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sanjihuli-ertong-nv"></span>
            <div class="name">
              三级护理-儿童-女
            </div>
            <div class="code-name">.icon-sanjihuli-ertong-nv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-xinshenger"></span>
            <div class="name">
              icon-新生儿
            </div>
            <div class="code-name">.icon-icon-xinshenger
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-nan"></span>
            <div class="name">
              icon-男
            </div>
            <div class="code-name">.icon-icon-nan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-nv"></span>
            <div class="name">
              icon-女
            </div>
            <div class="code-name">.icon-icon-nv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-wode"></span>
            <div class="name">
              icon-我的
            </div>
            <div class="code-name">.icon-icon-wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-chaxun"></span>
            <div class="name">
              icon-查询
            </div>
            <div class="code-name">.icon-icon-chaxun
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoushuchaxun"></use>
                </svg>
                <div class="name">手术查询</div>
                <div class="code-name">#icon-shoushuchaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuochuangwei"></use>
                </svg>
                <div class="name">搜索床位</div>
                <div class="code-name">#icon-sousuochuangwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huizhendanchaxun"></use>
                </svg>
                <div class="name">会诊单查询</div>
                <div class="code-name">#icon-huizhendanchaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiehuanyonghu"></use>
                </svg>
                <div class="name">切换用户</div>
                <div class="code-name">#icon-qiehuanyonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-muruweiyang"></use>
                </svg>
                <div class="name">母乳喂养</div>
                <div class="code-name">#icon-muruweiyang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouhuanbangding"></use>
                </svg>
                <div class="name">手环绑定</div>
                <div class="code-name">#icon-shouhuanbangding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yiqibangding"></use>
                </svg>
                <div class="name">仪器绑定</div>
                <div class="code-name">#icon-yiqibangding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-fanhuizhucaidan"></use>
                </svg>
                <div class="name">icon-返回主菜单</div>
                <div class="code-name">#icon-icon-fanhuizhucaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-fanhuizhuliebiao"></use>
                </svg>
                <div class="name">icon-返回主列表</div>
                <div class="code-name">#icon-icon-fanhuizhuliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuojiantou2"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#icon-zuojiantou2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-youjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xialajiantou"></use>
                </svg>
                <div class="name">下拉箭头</div>
                <div class="code-name">#icon-xialajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#icon-zuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erjihuli-nv"></use>
                </svg>
                <div class="name">二级护理-女</div>
                <div class="code-name">#icon-erjihuli-nv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijihuli-ertong"></use>
                </svg>
                <div class="name">一级护理-儿童</div>
                <div class="code-name">#icon-yijihuli-ertong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijihuli-nan"></use>
                </svg>
                <div class="name">一级护理-男</div>
                <div class="code-name">#icon-yijihuli-nan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijihuli-nv"></use>
                </svg>
                <div class="name">一级护理-女</div>
                <div class="code-name">#icon-yijihuli-nv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sanjihuli-nv"></use>
                </svg>
                <div class="name">三级护理-女</div>
                <div class="code-name">#icon-sanjihuli-nv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tejihuli-nan"></use>
                </svg>
                <div class="name">特级护理-男</div>
                <div class="code-name">#icon-tejihuli-nan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sanjihuli-nan"></use>
                </svg>
                <div class="name">三级护理-男</div>
                <div class="code-name">#icon-sanjihuli-nan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erjihuli-ertong"></use>
                </svg>
                <div class="name">二级护理-儿童</div>
                <div class="code-name">#icon-erjihuli-ertong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sanjihuli-ertong-nan"></use>
                </svg>
                <div class="name">三级护理-儿童-男</div>
                <div class="code-name">#icon-sanjihuli-ertong-nan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erjihuli-nan"></use>
                </svg>
                <div class="name">二级护理-男</div>
                <div class="code-name">#icon-erjihuli-nan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tejihuli-nv"></use>
                </svg>
                <div class="name">特级护理-女</div>
                <div class="code-name">#icon-tejihuli-nv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tejihuli-ertong"></use>
                </svg>
                <div class="name">特级护理-儿童</div>
                <div class="code-name">#icon-tejihuli-ertong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sanjihuli-ertong-nv"></use>
                </svg>
                <div class="name">三级护理-儿童-女</div>
                <div class="code-name">#icon-sanjihuli-ertong-nv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-xinshenger"></use>
                </svg>
                <div class="name">icon-新生儿</div>
                <div class="code-name">#icon-icon-xinshenger</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-nan"></use>
                </svg>
                <div class="name">icon-男</div>
                <div class="code-name">#icon-icon-nan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-nv"></use>
                </svg>
                <div class="name">icon-女</div>
                <div class="code-name">#icon-icon-nv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-wode"></use>
                </svg>
                <div class="name">icon-我的</div>
                <div class="code-name">#icon-icon-wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-chaxun"></use>
                </svg>
                <div class="name">icon-查询</div>
                <div class="code-name">#icon-icon-chaxun</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
